<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { tools } from "@/utils/utils";
import { useStore } from "vuex";

// 组件接口
const props = defineProps({
  cardTitle: {
    type: String,
    default: "Title",
  },
  placeholder: {
    type: String,
    default: "请输入...",
  },
  contentDate: {
    type: Array as () => string[],
    default: () => ["山东省test", "上海市t", "河南省t", "贵州省t", "云南省t"],
  },
  loadingFlag: {
    type: Boolean,
    default: false,
  },
  eventFunction: {
    type: Function as PropType<() => void>,
    default: () => {
      alert("ss");
    },
  },
});
// v-model 绑定
defineExpose({
  model: {
    prop: "selectResult",
    event: "update:selectResult",
  },
});

// 常量
interface dataProp {
  value: string;
}
const store = useStore();

// 响应式变量
const search = ref("");
const outPut_selectResult = ref("");
const tableData = ref<dataProp[]>([]);

// 事件
// 响应式变量监听事件
const filterTableData = computed(() =>
  tableData.value.filter(
    (value) => !search.value || value.value.includes(search.value)
  )
);
// 挂载成功事件
onMounted(() => {
  tableData.value = props.contentDate.map((item) => ({ value: item }));
});
watch(
  () => props.contentDate,
  (newData) => {
    tableData.value = newData.map((item) => ({ value: item }));
  },
  { deep: true } // 如果 data 是对象或数组，需要深度监听
);
// 双向绑定事件
const emit = defineEmits(["update:selectResult"]);

// function
const outPutResult = () => {
  emit("update:selectResult", outPut_selectResult.value);
};
const doSearchItem = (str: string) => {
  search.value = str;
  outPut_selectResult.value = str;
  outPutResult();
  props.eventFunction();
};
</script>

<template>
  <el-card class="PCDTSearchCard_m1">
    <template #header>
      <div>
        <span>{{ props.cardTitle }}</span>
      </div>
    </template>
    <el-table
      ref="multipleTableRef"
      v-loading="props.loadingFlag"
      element-loading-text="Loading..."
      :element-loading-spinner="tools.svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      :data="filterTableData"
      :style="{
        width: '100%',
        height: '150px',
        backgroundImage: 'radial-gradient(circle, #ecf5ff, #545c64)',
      }"
    >
      <el-table-column label="" width="60">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Search"
            @click.prevent="doSearchItem(scope.row.value)"
            circle
          />
        </template>
      </el-table-column>
      <el-table-column prop="value">
        <template #header>
          <el-input
            v-model="search"
            size="small"
            :placeholder="props.placeholder"
          />
        </template>
        <template #default="scope">
          <el-tag type="info" effect="dark">{{ scope.row.value }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
.PCDTSearchCard_m1 {
  width: 350px;
  height: 100%;
}
</style>
